<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
body {
    background-color: pink;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
  }
  h1 {
    margin: 10px;
  }
  .box {
    background-color: skyblue;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    transform: translateX(400%);
    transition: transform 0.5s ease;
  }
  .box:nth-of-type(even){
    transform: translateX(-400%);
  }
  .box.show{
    transform: translateX(0);
  }
  .box h2 {
    font-size: 45px;
  }
  </style>
</head>

<body>
   <h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

   </h1>
    <script>
        const boxes = document.querySelectorAll('.box');
        
        window.addEventListener('scroll',checkBoxes);
        checkBoxes();
        function checkBoxes() {
            console.log(window.innerHeight);

            boxes.forEach((box)=>{
                let tiriggerHeight = (window.innerHeight*2)/3;
                //获取每个盒子距离顶部视窗的高度
                let boxTop = box.getBoundingClientRect().top;
                if(boxTop<tiriggerHeight){
                    box.classList.add('show');
                }else{
                    box.classList.remove('show');
                }
            });
        }
    </script>
</body>
</html>